<!--
 * @Description:
 * @Author: 崔堂袁
 * @Date: 2021-05-04 23:31:05
 * @LastEditTime: 2021-05-11 12:30:49
-->
<template>
  <div class="sceneSetting">
    <!-- 场景背景颜色绑定 -->
    <div class="sceneBgColor">
      <div class="description">
        {{$t('lang.newScenePage.sceneBgColortitle')}}
      </div>
      <div class="inputDiv">
        <a-input v-model:value="rendererBgColor">
          <template #suffix>
            <CloseCircleOutlined @click="clearColorValue" />
          </template>
        </a-input>
        <button class="applyBtn"
                @click="applyBgColor">{{$t('lang.newScenePage.apply')}}</button>
      </div>
    </div>
    <!-- 场景辅助网格属性绑定 -->
    <div class="grid">
      <div class="description">{{$t('lang.newScenePage.gridTitle')}}</div>
      <div class="attributes">
        <div class="size">
          <div>{{$t('lang.newScenePage.gridSize')}}</div>
          <a-input v-model:value="gridSize"></a-input>
        </div>
        <div class="step">
          <div>{{$t('lang.newScenePage.gridStep')}}</div>
          <a-input v-model:value="gridStep"></a-input>
        </div>
        <div class="colorCenterLine">
          <div>{{$t('lang.newScenePage.gridCenterLineColor')}}</div>
          <a-input v-model:value="gridCenterLineColor"></a-input>
        </div>
        <div class="colorGrid">
          <div>{{$t('lang.newScenePage.gridColor')}}</div>
          <a-input v-model:value="gridColor"></a-input>
        </div>
        <div class="funcBtns">
          <button class="hiddenShowBtn"
                  @click="hiddenShowGrid">{{$t('lang.newScenePage.hiddenShow')}}</button>
          <button @click="applyGridSetting">{{$t('lang.newScenePage.apply')}}</button>
        </div>
      </div>
    </div>
    <!-- 坐标系 -->
    <div class="axesHelper">
      <div class="description">{{$t('lang.newScenePage.axesHelperTitle')}}</div>
      <div class="attributes">
        <div class="size">
          <div>{{$t('lang.newScenePage.axesSize')}}</div>
          <a-input v-model:value="axesSize"></a-input>
        </div>
        <div class="funcBtns">
          <button class="hiddenShowBtn"
                  @click="hiddenShowAxes">{{$t('lang.newScenePage.hiddenShow')}}</button>
          <button @click="applyAxesSetting">{{$t('lang.newScenePage.apply')}}</button>
        </div>
      </div>
    </div>
    <!-- 测试 -->
    <!-- <div class="test">
      <button @click="test">测试</button>
    </div> -->
  </div>
</template>

<script>
import { useStore } from 'vuex'
import { ref, toRaw } from '@vue/reactivity'
import { CloseCircleOutlined } from '@ant-design/icons-vue'
import * as THREE from 'three'
export default {
  components: {
    CloseCircleOutlined
  },
  setup () {
    const store = useStore()
    // ----------背景颜色---------
    const rendererBgColor = ref('#1e1e1e')
    const applyBgColor = () => {
      const renderer = toRaw(store.state.threeComponents._renderer)
      renderer.setClearColor(rendererBgColor.value, 0.8)
      store.commit('threeComponents/updateRenderer', renderer)
    }
    const clearColorValue = () => {
      rendererBgColor.value = ''
    }
    // ---------辅助网格线----------
    const gridSize = ref(10000)
    const gridStep = ref(100)
    const gridCenterLineColor = ref('#74c149')
    const gridColor = ref('#666666')
    const showGrid = ref(true)
    // 网格线显隐
    const hiddenShowGrid = () => {
      showGrid.value = !showGrid.value
      const scene = toRaw(store.state.threeComponents._scene)
      if (showGrid.value) { // 显示
        scene.getObjectByName('grid').visible = true
      } else { // 隐藏
        scene.getObjectByName('grid').visible = false
      }
      store.commit('threeComponents/updateScene', scene)
    }
    // 应用设定的属性值
    const applyGridSetting = () => {
      const scene = toRaw(store.state.threeComponents._scene)
      const grid = scene.getObjectByName('grid')
      scene.remove(grid)
      const newGrid = new THREE.GridHelper(gridSize.value, gridStep.value, gridCenterLineColor.value, gridColor.value)
      newGrid.name = 'grid'
      scene.add(newGrid)
      store.commit('threeComponents/updateScene', scene)
    }
    // ----------辅助坐标系------------
    const axesSize = ref(250)
    const axesShow = ref(true)
    const hiddenShowAxes = () => {
      axesShow.value = !axesShow.value
      const scene = toRaw(store.state.threeComponents._scene)
      if (axesShow.value) { // 显示
        scene.getObjectByName('axesHelper').visible = true
      } else { // 隐藏
        scene.getObjectByName('axesHelper').visible = false
      }
      store.commit('threeComponents/updateScene', scene)
    }
    const applyAxesSetting = () => {
      const scene = toRaw(store.state.threeComponents._scene)
      const axesHelper = scene.getObjectByName('axesHelper')
      scene.remove(axesHelper)
      const newAxesHelper = new THREE.AxesHelper(axesSize.value)
      newAxesHelper.name = 'axesHelper'
      scene.add(newAxesHelper)
      store.commit('threeComponents/updateScene', scene)
    }
    // test
    const test = () => {
      // const renderer = toRaw(store.state.threeComponents._renderer)
      const scene = toRaw(store.state.threeComponents._scene)
      // renderer.setClearColor('#ffffff', 0.8)
      // store.commit('threeComponents/updateRenderer', renderer)
      // const strScene = JSON.stringify(scene.toJSON())
      // const jsonScene = JSON.parse(strScene)
      // const loader = new THREE.ObjectLoader()
      // const newScene = loader.parse(jsonScene)
      console.log(scene)
    }

    return {
      test,
      applyBgColor,
      rendererBgColor,
      clearColorValue,
      gridSize,
      gridStep,
      gridCenterLineColor,
      gridColor,
      hiddenShowGrid,
      applyGridSetting,
      axesSize,
      hiddenShowAxes,
      applyAxesSetting
    }
  }
}
</script>

<style lang='less' scoped>
.sceneSetting {
  width: 100%;
  padding: 0 5px 0 10px;
  .sceneBgColor {
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px solid @activeColor;
    box-shadow: 2px 2px 2px @activeColor;
    display: flex;
    flex-direction: column;
    .description {
      width: 100%;
      height: 25px;
    }
    .inputDiv {
      width: 100%;
      display: flex;
      align-items: center;
      .ant-input-affix-wrapper {
        width: 110px;
        /deep/.anticon-close-circle {
          color: rgba(0, 0, 0, 0.4);
          cursor: pointer;
          &:hover {
            color: @baseColor;
          }
        }
      }
      .applyBtn {
        width: 40px;
        height: 30px;
        padding: 0;
        margin-left: 10px;
        outline: none;
        border: 1px solid rgba(0, 0, 0, 0.2);
        background-color: inherit;
        border-radius: 5px;
        font-size: 10px;
        cursor: pointer;
        &:hover {
          border-color: @baseColor;
          box-shadow: 1px 1px 5px @baseColor;
        }
        &:active {
          box-shadow: none;
        }
      }
    }
  }
  .grid,
  .axesHelper {
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px solid @activeColor;
    box-shadow: 2px 2px 2px @activeColor;
    .description {
      width: 100%;
      height: 25px;
    }
    .attributes {
      width: 100%;
      display: flex;
      flex-direction: column;
      padding: 0 10px 0 0;
      .size,
      .step,
      .colorCenterLine,
      .colorGrid,
      .funcBtns {
        width: 100%;
        height: 42px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .ant-input {
          width: 80px;
        }
      }
      .funcBtns {
        justify-content: center;
        button {
          height: 30px;
          padding: 0 10px;
          outline: none;
          border: 1px solid rgba(0, 0, 0, 0.2);
          background-color: inherit;
          border-radius: 5px;
          font-size: 10px;
          cursor: pointer;
          &:hover {
            border-color: @baseColor;
            box-shadow: 1px 1px 5px @baseColor;
          }
          &:active {
            box-shadow: none;
          }
        }
        .hiddenShowBtn {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>
